<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item to="/dashboard">首页</el-breadcrumb-item>
      <!-- <el-breadcrumb-item to="/user">用户管理</el-breadcrumb-item> -->
      <el-breadcrumb-item>分类管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="post-container">
      <!-- 1.表格样式 -->
      <el-row>
        <el-col :span="8">
          <el-button
            icon="el-icon-circle-plus-outline"
            size="small"
            type="primary"
            @click="handleAdd"
          >
            添加
          </el-button>
        </el-col>
        <el-col :span="8" :offset="8">
          <el-input
            v-model="keywords"
            size="small"
            placeholder="请输入需要查找分类"
            @keyup.enter.native="handleSearch"
          >
          </el-input>
          <el-button type="primary" size="mini" @click="handleSearch">
            搜索
          </el-button>
        </el-col>
      </el-row>
      <!-- 2.表格数据 -->
      <el-table highlight-current-row :data="category" stripe border>
        <el-table-column label="id" prop="id"></el-table-column>
        <el-table-column label="文章分类" prop="type"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scoped">
            <el-button
              size="small"
              icon="el-icon-edit"
              @click="handleEdit(scoped.row.id)"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 3.分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
        <!-- page:有多少页
           size：每页多少条
           total：一共多少条
       -->
      </el-pagination>
      <!-- 4.dialog-->
      <el-dialog
        :title="isEdit ? '修改文章分类' : '添加文章分类'"
        :visible.sync="dialogVisible"
        width="40%"
      >
        <el-form :model="postForm" :rules="postRules" ref="postForm">
          <el-form-item label="分类" prop="type" label-width="70px">
            <el-input
              v-model="postForm.type"
              placeholder="请输入文章分类"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Post',
  data() {
    return {
      keywords: '',
      category: [],
      page: 1, //当前的页码数
      size: 5, // 每页显示记录数
      total: 0, // 记录总数
      isEdit: false,
      isSearch: false,
      dialogVisible: false,
      postForm: { type: '' },
      postRules: {
        type: [
          { required: true, message: '文章分类不能为空', trigger: 'blur' },
        ],
      },
    }
  },
  created() {
    this.getcategory()
  },
  computed: {
    pages() {
      return Math.ceil(this.total / this.size)
    },
  },
  methods: {
    cancel() {
      this.dialogVisible = false
    },
    getcategory() {
      this.$api.getAllType(this.page, this.size).then((res) => {
        this.total = res.data.result.total
        this.category = res.data.result.data
      })
    },
    handleCurrentChange(p) {
      this.page = p
      if (this.isSearch == false) {
        this.getcategory()
      } else {
        this.getSearch()
      }
    },
    handleSizeChange(s) {
      this.size = s
      // console.log(this.is)
      if (this.isSearch == false) {
        this.getcategory()
      } else {
        this.getSearch()
      }
    },
    handleAdd() {
      this.dialogVisible = true
    },
    handleEdit(id) {
      this.isEdit = true
      // 显示对话框
      this.dialogVisible = true
      this.$api.getOneType(id).then((res) => {
        const { result } = res.data
        // 根据返回的数据, 更新form状态
        this.postForm = result
      })
    },
    getSearch() {
      this.$api
        .getSearchType(this.page, this.size, this.keywords)
        .then((res) => {
          // console.log(res)
          this.total = res.data.result.total
          this.category = res.data.result.data
          // console.log(this.total)
          // this.getcategory()
        })
    },
    handleSearch() {
      if (this.keywords == '') {
        this.getcategory()
      } else {
        this.isSearch = true
        this.getSearch()
      }
    },
    onSubmit() {
      this.$refs['postForm'].validate((valid) => {
        if (valid) {
          if (this.isEdit == false) {
            // 发送请求 POST请求, 新增
            this.$api.postAddType(this.postForm).then((res) => {
              // console.log(res)
              const { code, message } = res.data
              if (code == 0) {
                // 提示新增成功
                this.$message.success(message)
                // 重新获取数据
                this.getcategory()
                // 关闭对话框
                this.dialogVisible = false
                // 清空表单数据
                this.$refs['postForm'].resetFields()
              } else {
                this.$message.error(message)
                this.dialogVisible = false
              }
            })
          } else {
            // 修改
            this.$api
              .putModifyType(this.postForm.id, this.postForm)
              .then((res) => {
                const { code, message } = res.data
                if (code == 0) {
                  // 提示新增成功
                  this.$message.success(message)
                  // 重新获取数据
                  this.getcategory()
                  // 关闭对话框
                  this.dialogVisible = false
                  // 清空表单数据
                  this.$refs['postForm'].resetFields()
                } else {
                  this.$message.error(message)
                  this.dialogVisible = false
                }
              })
          }
        }
      })
    },
  },
}
</script>

<style scoped>
.post-container {
  margin-top: 20px;
  min-width: 700px;
}
.el-input {
  width: 70%;
  margin-right: 10px;
}
.el-table {
  margin-top: 20px;
}
</style>
